<template>
  <div class="general-app" :style="{ 'padding-bottom': $computeVh(20) }">
    <!-- <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)">人机增强多智能体量化评估与演化</span>
      <div class="nav-tab">
        <el-tabs style="color: rgb(245, 245, 245)" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="模型" name="first"></el-tab-pane>
          <el-tab-pane label="性能" name="second"></el-tab-pane>
          <el-tab-pane label="场景" name="third"></el-tab-pane>
        </el-tabs>
      </div>
    </el-header> -->
    <MainHeader :typeIndex="typeIndex" @changeTypeEvent="handleClick" />
    <el-main class="effect-box-main">

      <!-- 模型、性能、效果部分 -->
      <div class="mian-box-card">
        <div class="button-box">
          <el-button text :class="['item-button', buttonIndex === 0 ? 'item-active' : '']"
            @click="handleCalculate">优化控制</el-button>
          <el-button text :class="['item-button', buttonIndex === 1 ? 'item-active' : '']"
            @click="handleAgent">故障处理</el-button>
        </div>
      </div>
      <!-- <div class="mian-box-card">
        <div class="button-box">
          <el-button text :class="['item-button', buttonIndex === 0 ? 'item-active' : '']"
            @click="handleCalculate">算例</el-button>
          <el-button text :class="['item-button', buttonIndex === 1 ? 'item-active' : '']"
            @click="handleAgent">智能体</el-button>
        </div>
      </div> -->
      <div class="general-container effect-main">
        <router-view />
      </div>
    </el-main>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from "element-plus";
import axios from "axios";
import { useRouter } from 'vue-router'
import MainHeader from '@/views/MainHeader.vue';


const activeName = ref('third');
const buttonIndex = ref(0)
const typeIndex = ref(2)

function handleCalculate() {
  buttonIndex.value = 0
  router.push('/effect/optimaze-ctrl')
}

function handleAgent() {
  buttonIndex.value = 1
  router.push('/effect/fault-process')
}

const router = useRouter();

const handleClick = (item, index) => {
  activeName.value = item;
  typeIndex.value = index;
  if (activeName.value === "second") {
    router.push('/performance')
  } else if (activeName.value === "first") {
    router.push('/mainbox')
  }
};

onMounted(() => {
  router.push('/effect/optimaze-ctrl')
})


function simulateAndVerify() { }

</script>

<style scoped lang="scss">
.effect-box-main {
  flex: 1;
  color: #fff;
  display: flex;
  flex-direction: column;

  .mian-box-card {
    background-color: rgba(16, 68, 93, 0.6);
    border: 1px solid #2F606B;
    margin-bottom: computeVh(20);
    padding: 13px 16px;


    .button-box {
      display: flex;
      width: computeVw(200);
      border-radius: 1px;
      border: 1px solid #2F606B;

      .item-button {
        flex: 1;
        color: #fff;
        border-radius: 0;
        margin: 0
      }

      .item-button:hover {
        background-color: #162530;
      }

      .item-active {
        font-weight: bold;
        background-color: #00C3AC;
      }
    }

  }
}

.effect-main {
  display: flex;
  flex-direction: column;
  height: computeVh(900);
  padding-bottom: computeVh(20);
  box-sizing: border-box;
}


/* 其他样式 */
// .custom-header {
//   background-color: rgb(26, 68, 94);
//   padding-top: 15px;
// }

.nav-tab {
  display: inline-block;
  /* 使 div 表现得像行内块级元素 */
  float: right;
  /* 使其右浮动 */
  color: rgb(245, 245, 245);
}

/*图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>